﻿@model UniTax.Models.TownList

@{
    ViewBag.Title = "Список служб такси";
}

@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
        </div>
    </section>
}

<div class="sidebar">
    <div id="0" class="Editor">
        @Ajax.ActionLink("Редактор городов", "TownList", null, new AjaxOptions
        {
            UpdateTargetId = "ajaxContainer",
            OnBegin = "showWaitDiv",
            OnSuccess = "hideWaitDiv"
        }, new { @onclick = " SidebarActive(" + 0 + ")" })
    </div>
    @foreach (var town in Model.Towns)
    {
        <div id="@town.Id" class="Sity">
            @Ajax.ActionLink(town.Name, "TaxiList", new { id = town.Id }, new AjaxOptions
                {
                    UpdateTargetId = "ajaxContainer",
                    OnBegin = "showWaitDiv",
                    OnSuccess = "hideWaitDiv"
                }, new { @onclick = " SidebarActive(" + town.Id + ")" })
        </div>   
    }
</div>

<div class="wrapper">
    <div id="ajaxContainer">
        <p id="welcome">Выберите нужный пункт из меню слева!</p>
    </div>
</div>

@*Меняет фон у выбранного города*@
<script type="text/javascript">
    function SidebarActive(townid) {
        // Города
        var cities = document.getElementsByClassName('SelectedSity');
        if (cities.length > 0)
            for (var i = 0; i < cities.length; i++)
                cities[i].className = 'Sity';

        var selected = document.getElementsByClassName('SelectedEditor');
        if (selected.length > 0)
            for (var j = 0; j < selected.length; j++)
                selected[j].className = 'Editor';

        if (townid == 0) {
            document.getElementById(townid).className = 'SelectedEditor';
        } else {

            document.getElementById(townid).className = 'SelectedSity';
        }
    };
</script>
